<script setup lang="ts">
import { ref, reactive, onMounted, onUnmounted, computed, nextTick } from 'vue'
import { type FormInstance, type FormRules, ElMessageBox, ElMessage } from 'element-plus'
import { sumValues } from '../../utils/common'
import Decimal from 'decimal.js'
import { getListApi, doAddApi, doUpdateApi, doDeleteApi } from '@/api/quote'
import { type QuoteRecord } from '@/api/quote/types'
// html2canvas已在composables中使用，这里不需要重复导入
import ContextMenu from './components/Calculator/ContextMenu.vue'
import UploadDeleteContextMenu from './components/Calculator/UploadDeleteContextMenu.vue'
import { pictureFun, handleComplete } from './composables/index'
const UploadDeleteContextMenuVisible = ref(false)
const UploadDeleteContextMenuPosition = reactive({ x: 0, y: 0 })
const UploadDeleteContextMenuData = ref<QuoteRecord>({
  id: 0,
  serial_number: '',
  text: '',
  title: '',
  uid: 0,
  create_time: '',
  delete: 0,
  update_time: '',
  company_id: 0,
  company_name: '',
  totalAmount: 0
})

// 右键菜单相关
const contextMenuVisible = ref(false)
const contextMenuPosition = reactive({ x: 0, y: 0 })
type ContextRow = DiscountItem | BuysItem
const contextMenuRow = ref<ContextRow>({
  serialNumber: 0,
  matter: '',
  acceptor: '',
  billAmount: '',
  points: '',
  open: 0,
  rebate: '',
  interestDeduction: ''
  // `checked` 本身是可选的，可省略
})
const contextMenuType = ref('')

import daysjs from 'dayjs'
const contentRef = ref<HTMLDivElement | null>(null)
const snapshotRef = ref<HTMLDivElement | null>(null)
const currentDate = daysjs()
const disabledDate = (time: Date) => {
  return time.getTime() > Date.now()
}
const customDateFormat = ref<string>('YYYY-MM-DD')
const historyDate = ref(currentDate.format('YYYY-MM-DD'))
const handleDateChange = (val: string) => {
  console.log(val)
  historyDate.value = val
  quotelistApis()
}

const serial_number = ref<string>('***********')
onMounted(() => {
  quotelistApis()
  // 添加全局点击事件监听，用于关闭右键菜单
  document.addEventListener('click', closeContextMenu)
  document.addEventListener('click', closeHistoryContextMenu)
})

onUnmounted(() => {
  // 移除全局事件监听器
  document.removeEventListener('click', closeContextMenu)
  document.removeEventListener('click', closeHistoryContextMenu)
})

interface RuleForm {
  acceptor: string
  billAmount: string
  points: string
  open: string
}

const quotelistApis = async () => {
  historyList.value = []
  let isFinish = 1
  if (activeTab.value == 'complete') {
    isFinish = 2
  }
  await getListApi({
    create_time: historyDate.value,
    isFinish: isFinish
  }).then((res) => {
    historyList.value = res.data
  })
}

const addQuoteApis = async (obj: { text: string; name: string }) => {
  await doAddApi({
    title: obj.name,
    text: obj.text
  }).then(async () => {
    ElMessage({
      message: '添加成功',
      type: 'success'
    })
    historyActive.value = -1
    await quotelistApis()
  })
}

const updateQuoteApis = async (obj: { text: string; id: number | string; name: string }) => {
  const res = await doUpdateApi({
    text: obj.text,
    title: obj.name,
    id: obj.id
  })
  if (res.code == 200) {
    ElMessage({
      message: '修改成功',
      type: 'success'
    })
    historyActive.value = 0
    if (historyDate.value != currentDate.format('YYYY-MM-DD')) {
      historyDate.value = currentDate.format('YYYY-MM-DD')
    }
    await quotelistApis()
  }
}

const deleteQuoteApis = (id: number) => {
  doDeleteApi({ id: id }).then(() => {
    ElMessage({
      message: '删除成功',
      type: 'success'
    })
    quotelistApis()
  })
}

// #region 贴现
interface DiscountItem {
  serialNumber: number
  matter: string
  acceptor: string
  billAmount: string
  points: string
  open: number
  rebate: string
  interestDeduction: string
  checked?: boolean
}
const discountList = ref<DiscountItem[]>([])
const discountLen = ref<number>(0)
const discountRef = ref<FormInstance>()
const discount = reactive({
  acceptor: '',
  matter: '',
  billAmount: '',
  points: '',
  open: 1
})
const discountTotal = reactive({
  serialNumber: '',
  matter: '',
  acceptor: '',
  billAmount: '',
  points: '',
  open: '',
  rebate: '',
  interestDeduction: ''
})
const discountRules = reactive<FormRules<RuleForm>>({
  acceptor: [{ required: true, message: '请输入承兑人信息', trigger: 'blur' }],
  billAmount: [{ required: true, message: '请输入票面金额（万元）', trigger: 'blur' }],
  points: [{ required: true, message: '请输入点数', trigger: 'blur' }],
  open: [
    {
      required: true,
      message: '请选择张数',
      trigger: 'change'
    }
  ]
})
// #endregion

// #region buy tickets 买票
interface BuysItem {
  serialNumber: number
  matter: string
  acceptor: string
  billAmount: string
  points: string
  open: number
  rebate: string
  interestDeduction: string
  checked?: boolean
}
const buysList = ref<BuysItem[]>([])
const buysLen = ref<number>(0)
const buyRef = ref<FormInstance>()
const buy = reactive({
  acceptor: '',
  billAmount: '',
  points: '',
  open: 1
})
const buyTotal = reactive({
  serialNumber: '',
  matter: '',
  acceptor: '',
  billAmount: '',
  points: '',
  open: '',
  rebate: '',
  interestDeduction: ''
})
const buyRules = reactive<FormRules<RuleForm>>({
  acceptor: [{ required: true, message: '请输入承兑人信息', trigger: 'blur' }],
  billAmount: [{ required: true, message: '请输入票面金额（万元）', trigger: 'blur' }],
  points: [{ required: true, message: '请输入点数', trigger: 'blur' }],
  open: [
    {
      required: true,
      message: '请选择张数',
      trigger: 'change'
    }
  ]
})
// #endregion

// #region 列表数据变化
const total = reactive({
  acceptor: '',
  billAmount: '',
  points: '',
  open: '',
  rebate: '',
  interestDeduction: ''
})
// 重置total
const resetTotal = () => {
  total.acceptor = ''
  total.billAmount = ''
  total.points = ''
  total.open = ''
  total.rebate = ''
  total.interestDeduction = ''
  buyTotal.billAmount = ''
  buyTotal.rebate = ''
  discountTotal.billAmount = ''
  discountTotal.interestDeduction = ''
}

const onTotal = () => {
  resetTotal()
  if (discountLen.value > 0 && buysLen.value == 0) {
    const { billAmount, interestDeduction } = sumValues(discountList.value)
    discountTotal.billAmount = new Decimal(billAmount || 0).toString()
    discountTotal.interestDeduction = new Decimal(interestDeduction || 0)
      .toDecimalPlaces(0)
      .toString()
    total.acceptor = '合计'
    total.billAmount = discountTotal.billAmount
    total.points = '贴息费'
    const difference = new Decimal(discountTotal.interestDeduction || 0)
      .toDecimalPlaces(0)
      .toString()
    total.interestDeduction = difference
  } else if (buysLen.value > 0 && discountLen.value == 0) {
    const { billAmount, rebate } = sumValues(buysList.value)
    buyTotal.billAmount = new Decimal(billAmount || 0).toString()
    buyTotal.rebate = new Decimal(rebate || 0).toDecimalPlaces(0).toString()
    total.billAmount = buyTotal.billAmount
    total.acceptor = '合计'
    total.points = '返点'
    total.interestDeduction = buyTotal.rebate
  } else if (buysLen.value > 0 && discountLen.value > 0) {
    const totalDis = sumValues(discountList.value)
    discountTotal.billAmount = totalDis.billAmount
    discountTotal.interestDeduction = totalDis.interestDeduction
    const totalBuy = sumValues(buysList.value)
    buyTotal.billAmount = totalBuy.billAmount
    buyTotal.rebate = totalBuy.rebate

    const billAmountDis = new Decimal(discountTotal.billAmount || 0)
    const billAmountBuy = new Decimal(buyTotal.billAmount || 0)
    const number = billAmountDis.sub(billAmountBuy).toNumber()
    if (number == 0) {
      total.billAmount = '已走平'
    } else if (number > 0) {
      total.acceptor = '票面差额'
      total.billAmount = number + ''
    } else {
      total.acceptor = '票面差额'
      total.billAmount = number + ''
    }

    const discount = new Decimal(discountTotal.interestDeduction || 0)
    const buy = new Decimal(buyTotal.rebate || 0)
    //2024-10-18 下午修改
    const differences = discount.sub(buy).toDecimalPlaces(0)
    const difference = differences.toNumber()
    if (difference == 0) {
      total.interestDeduction = '已走平'
    } else if (difference > 0) {
      total.points = '贴息费'
      total.interestDeduction = differences.toString()
    } else {
      total.points = '返点'
      total.interestDeduction = differences.toString()
    }
  }

  total.billAmount = total.billAmount.replace('-', '')
  total.interestDeduction = total.interestDeduction.replace('-', '')
  total.rebate = total.rebate.replace('-', '')
}
// #endregion

// #region 计算结果后去掉多余的0
// 计算结果后去掉多余的0
// 自定义函数，去掉末尾不必要的 0 和小数点
function removeTrailingZeros(value) {
  let strValue = new Decimal(value).toFixed(2) // 保留两位小数
  // 如果小数点后全是 0，则去掉小数点及之后的部分
  if (strValue.indexOf('.') !== -1) {
    strValue = strValue.replace(/\.?0+$/, '')
  }
  return strValue
}
// #endregion

// 引用 tbody
const tableBody = ref<HTMLElement | null>(null)
const rowRefs = ref<{ [key: string]: HTMLElement[] }>({ discount: [], buy: [] })
// 设置行的引用
const setRowRef = (el: HTMLElement | null, type: string, index: number) => {
  if (el) {
    if (!rowRefs.value[type]) {
      rowRefs.value[type] = []
    }
    rowRefs.value[type][index] = el
  }
}
// 滚动到最新一行的函数
const scrollToLatestRow = (type: string) => {
  console.log('type', type)
  const listLength = type === 'discountList' ? discountLen.value : buysLen.value
  console.log('listLength', listLength)
  if (listLength > 0) {
    const rowArray = rowRefs.value[type === 'discountList' ? 'discount' : 'buy']
    console.log('rowArray', rowArray)
    const lastRow = rowArray[listLength - 1]
    console.log('lastRow', lastRow)
    if (lastRow) {
      lastRow.scrollIntoView({ behavior: 'smooth' })
      // 如果是 discountList，增加额外的滚动偏移
      if (type === 'discountList') {
        const container = document.querySelector('.el-scrollbar__wrap')
        if (container) {
          // 增加 36px 的滚动偏移量
          container.scrollTop -= 36
        }
      }
    }
  }
}
// #region 公共提交方法
const onSubmit = async (formEl: FormInstance | undefined, type: string) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      const target = type === 'discountList' ? discount : buy
      const lens = type === 'discountList' ? discountLen : buysLen
      lens.value = lens.value + 1
      const matter = type === 'discountList' ? '贴现' : '买票'
      let points = new Decimal(target.points || 0)
      points = points.div(100)
      let billAmount = new Decimal(target.billAmount || 0)
      billAmount = billAmount.mul(10000)
      const rebate =
        type === 'discountList' ? '' : removeTrailingZeros(points.mul(target.open).mul(billAmount))
      const interestDeduction =
        type === 'discountList' ? removeTrailingZeros(points.mul(target.open).mul(billAmount)) : ''
      const obj = {
        serialNumber: lens.value,
        matter: matter,
        acceptor: target.acceptor,
        billAmount: target.billAmount,
        points: target.points,
        open: target.open,
        rebate: rebate,
        interestDeduction: interestDeduction
      }
      const lists = type === 'discountList' ? discountList : buysList
      lists.value.push(obj)
      const refs = type === 'discountList' ? discountRef : buyRef
      if (refs.value) {
        refs.value.resetFields()
      }
    } else {
      console.log('error submit!', fields)
    }
  })

  onTotal()

  nextTick().then(() => {
    scrollToLatestRow(type)
    if (type === 'discountList') {
      firstInputForm1.value?.focus()
    } else {
      firstInputForm2.value?.focus()
    }
  })
}
// #endregion

const isEditBoolendis = ref<boolean>(false)
const isEditBoolenbuy = ref<boolean>(false)
const selecteddis = ref(-1)
const selectedbuy = ref(-1)
const selectedRowIndex = ref(-1)
const selectedRowType = ref('')
// 选中单行
const selectRow = (index: number, type: string) => {
  // 获取表单值
  const target = type === 'discount' ? discount : buy
  // 重置表单
  const refs = type === 'discount' ? discountRef : buyRef
  if (refs.value) {
    refs.value.resetFields()
  }
  // 获取列表值
  const lists = type === 'discount' ? discountList.value[index] : buysList.value[index]
  target.acceptor = lists.acceptor
  target.billAmount = lists.billAmount
  target.points = lists.points
  target.open = lists.open
  // 按钮变修改
  const isEditBoolen = type === 'discount' ? isEditBoolendis : isEditBoolenbuy
  isEditBoolen.value = true
  // 选中行
  const selected = type === 'discount' ? selecteddis : selectedbuy
  selected.value = index

  selectedRowIndex.value = index
  selectedRowType.value = type
  closeContextMenu()
}

// 列表选中表单修改
const doEdit = (type: string) => {
  const target = type === 'discount' ? discount : buy
  const lists =
    type === 'discount' ? discountList.value[selecteddis.value] : buysList.value[selectedbuy.value]
  lists.acceptor = target.acceptor
  lists.billAmount = target.billAmount
  lists.points = target.points
  lists.open = target.open
  let points = new Decimal(target.points || 0)
  points = points.div(100)
  let billAmount = new Decimal(target.billAmount || 0)
  billAmount = billAmount.mul(10000)
  let newpoints = points.mul(target.open).mul(billAmount).toFixed(2).toString()
  newpoints = removeTrailingZeros(newpoints)
  const interestDeduction = type === 'discount' ? newpoints : ''
  const rebate = type === 'discount' ? '' : newpoints
  lists.interestDeduction = interestDeduction
  lists.rebate = rebate
  const isEditBoolen = type === 'discount' ? isEditBoolendis : isEditBoolenbuy
  isEditBoolen.value = false
  const refs = type === 'discount' ? discountRef : buyRef
  if (refs.value) {
    refs.value.resetFields()
  }

  onTotal()
}

const discountRefFields = () => {
  if (discountRef.value) {
    discountRef.value.resetFields()
  }
}
const buyRefFields = () => {
  if (buyRef.value) {
    buyRef.value.resetFields()
  }
}

// #region 功能栏
const clearFrom = () => {
  resetTotal()
  isEditBoolendis.value = false
  isEditBoolenbuy.value = false
  historyActive.value = -1
  selecteddis.value = -1
  selectedbuy.value = -1
  selectedRowIndex.value = -1
  selectedRowType.value = ''
  serial_number.value = '***********'
  discountRefFields()
  buyRefFields()
  buysList.value = []
  buysLen.value = 0
  discountList.value = []
  discountLen.value = 0
}
// Function
// 清空表格
const clear = () => {
  ElMessageBox.confirm('确定要清空当前表格吗?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    draggable: true,
    type: 'warning'
  }).then(() => {
    clearFrom()
  })
}

//保存
import dayjs from 'dayjs'
const saves = () => {
  console.log('hsaves')
  console.log(historyList.value)
  // value 改为 当前时间
  let value = dayjs().format('HH:mm')
  // 将 billAmount 转换为数字类型并相加
  // 使用 Decimal.js 进行精确的金额计算
  const buyAmount = new Decimal(buyTotal.billAmount || 0)
  const discountAmount = new Decimal(discountTotal.billAmount || 0)
  const billAmount = buyAmount.plus(discountAmount) // 保留两位小数
  value = value + '-' + billAmount
  const hisObj = {
    name: value,
    text: JSON.stringify({
      discount: discountList.value,
      buy: buysList.value
    })
  }
  addQuoteApis(hisObj)
  // historyList.value.push(hisObj)
  discountList.value = []
  discountLen.value = 0
  buysList.value = []
  buysLen.value = 0
}

const edits = () => {
  if (historyActive.value < 0) {
    ElMessage({
      type: 'error',
      message: '请选择要编辑的'
    })
  }
  const lists = historyList.value
  const list = lists[historyActive.value]
  console.log('list', list)
  // value 改为 当前时间
  let value = dayjs().format('HH:mm')
  if (list.company_id != 0 && list.company_name != '' && list.company_id != null) {
    value = value + '-' + list.company_name
  } else {
    // 将 billAmount 转换为数字类型并相加
    // 使用 Decimal.js 进行精确的金额计算
    const buyAmount = new Decimal(buyTotal.billAmount || 0)
    const discountAmount = new Decimal(discountTotal.billAmount || 0)
    const billAmount = buyAmount.plus(discountAmount) // 保留两位小数

    value = value + '-' + billAmount
  }
  const hisObj = {
    id: list.id,
    name: value,
    text: JSON.stringify({
      discount: discountList.value,
      buy: buysList.value
    })
  }
  updateQuoteApis(hisObj)
}
// #endregion

const historyActive = ref<number>(-1)
const historyList = ref<QuoteRecord[]>([])

const handleHistory = (item: { serial_number: string; text: string }, index: number) => {
  // if (historyActive.value == index) {
  //   historyActive.value = -1
  //   serial_number.value = '***********'
  //   discountList.value = []
  //   discountLen.value = 0
  //   buysList.value = []
  //   buysLen.value = 0
  // } else {
  historyActive.value = index
  serial_number.value = item.serial_number
  const hisObj = JSON.parse(item.text)
  discountList.value = hisObj.discount
  discountLen.value = discountList.value.length
  buysList.value = hisObj.buy
  buysLen.value = buysList.value.length
  // }

  onTotal()
}

const HistoryDelete = () => {
  if (historyActive.value < 0) {
    ElMessage({
      type: 'error',
      message: '请选择要删除的'
    })
  }
  ElMessageBox.confirm('确定要删除吗?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    draggable: true,
    type: 'warning'
  }).then(() => {
    const list = historyList.value[historyActive.value]
    deleteQuoteApis(list.id)
    clearFrom()
  })
}

const isCompleteBoolean = ref<boolean>(true)
const special = ref<boolean>(false)
// const specialNum = ref<number>(0)
// 使用composables中的handleComplete方法
const handleCompleteLocal = () => {
  handleComplete(isCompleteBoolean, special)
}

const handlePicture = async () => {
  // 调用composables中的pictureFun方法
  await pictureFun(contentRef, snapshotRef, isCaptureMode)
}

const handleInput = (field: string, type: 'discount' | 'buy') => {
  const target = type === 'discount' ? discount : buy

  let value = target[field]
  // 正则表达式：允许数字和小数点
  value = value.replace(/[^0-9.]/g, '')

  // 确保只有一个小数点
  if (value.split('.').length > 2) {
    value = value.slice(0, -1)
  }

  // 更新目标对象的值
  target[field] = value
}

// #region 回车提交
const handleDiscountEnter = () => {
  if (isEditBoolendis.value) {
    doEdit('discount')
  } else {
    onSubmit(discountRef.value, 'discountList')
  }
}

const handleBuyEnter = () => {
  if (isEditBoolenbuy.value) {
    doEdit('buy')
  } else {
    onSubmit(buyRef.value, 'buyList')
  }
}
// #endregion

const deleteRows = () => {
  const type = 'checked'
  ElMessageBox.confirm('确定要删除吗?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    draggable: true,
    type: 'warning'
  }).then(() => {
    console.log(type)
    const filterFunc = (item: DiscountItem | BuysItem) =>
      type === 'checked' ? !item.checked : item.checked

    discountList.value = discountList.value.filter(filterFunc)
    discountList.value.forEach((value, index) => {
      value.checked = false
      value.serialNumber = index + 1
    })
    discountLen.value = discountList.value.length
    buysList.value = buysList.value.filter(filterFunc)
    buysList.value.forEach((value, index) => {
      value.checked = false
      value.serialNumber = index + 1
    })
    buysLen.value = buysList.value.length
    onTotal()
    discountRefFields()
    buyRefFields()
    isEditBoolendis.value = false
    isEditBoolenbuy.value = false
    // historyActive.value = -1
    selecteddis.value = -1
    selectedbuy.value = -1
    selectedRowIndex.value = -1
    selectedRowType.value = ''
  })
}
const safeDecimal = (value: unknown): Decimal => {
  const num = Number(value) || 0
  return new Decimal(Number.isNaN(num) ? 0 : num)
}

// #region 右键菜单功能
// 复制到剪贴板
const handleCopyToClipboard = () => {
  if (!contextMenuRow.value) return

  const row = contextMenuRow.value
  // 创建要复制的文本
  const text = `承兑人: ${row.acceptor}\n票面金额: ${row.billAmount}万元\n点数: ${row.points}\n张数: ${row.open}`

  // 使用 navigator.clipboard API 复制到剪贴板
  try {
    navigator.clipboard.writeText(text).then(() => {
      ElMessage({
        message: '已复制到剪贴板',
        type: 'success'
      })
    })
  } catch (err) {
    // 创建临时文本区域作为备选方案
    const textArea = document.createElement('textarea')
    textArea.value = text
    document.body.appendChild(textArea)
    textArea.select()
    document.execCommand('copy')
    document.body.removeChild(textArea)

    ElMessage({
      message: '已复制到剪贴板',
      type: 'success'
    })
  }

  closeContextMenu()
}
// 显示右键菜单
const showContextMenu = (
  event: MouseEvent,
  row: DiscountItem | BuysItem, // 👈 这里用联合类型
  index: number,
  type: string
) => {
  console.log('showContextMenu')
  console.log(row)
  console.log(index)
  console.log(type)
  // 阻止默认右键菜单
  event.preventDefault()
  event.stopPropagation()
  // 设置菜单位置
  contextMenuPosition.x = event.clientX
  contextMenuPosition.y = event.clientY
  // 保存当前行数据和类型
  contextMenuRow.value = row
  contextMenuType.value = type
  // 显示菜单
  contextMenuVisible.value = true
}

// 关闭右键菜单
const closeContextMenu = () => {
  contextMenuVisible.value = false
}

// 复制行数据
const handleCopyRow = () => {
  if (!contextMenuRow.value) return

  const type = contextMenuType.value
  const target = type === 'discount' ? discount : buy
  console.log(target)
  const lens = type === 'discount' ? discountLen : buysLen
  lens.value = lens.value + 1

  // 复制行数据
  const row = contextMenuRow.value
  const newRow = {
    serialNumber: lens.value,
    matter: row.matter,
    acceptor: row.acceptor,
    billAmount: row.billAmount,
    points: row.points,
    open: row.open,
    rebate: row.rebate,
    interestDeduction: row.interestDeduction,
    checked: false
  }

  // 添加到对应列表
  const lists = type === 'discount' ? discountList : buysList
  lists.value.push(newRow)

  // 更新合计
  onTotal()

  // 关闭菜单
  closeContextMenu()

  // 滚动到新行
  nextTick().then(() => {
    scrollToLatestRow(type === 'discount' ? 'discountList' : 'buyList')
  })

  ElMessage({
    message: '复制成功',
    type: 'success'
  })
}

// 删除行
const handleDeleteRow = () => {
  if (!contextMenuRow.value) return

  ElMessageBox.confirm('确定要删除该行吗?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    draggable: true,
    type: 'warning'
  })
    .then(() => {
      const type = contextMenuType.value
      const lists = type === 'discount' ? discountList : buysList
      const lens = type === 'discount' ? discountLen : buysLen

      // 找到要删除的行索引
      const index = lists.value.findIndex(
        (item) => item.serialNumber === contextMenuRow.value.serialNumber
      )

      if (index !== -1) {
        // 删除行
        lists.value.splice(index, 1)

        // 重新编号
        lists.value.forEach((item, i) => {
          item.serialNumber = i + 1
        })

        // 更新长度
        lens.value = lists.value.length

        // 更新合计
        onTotal()

        // 重置表单和选中状态
        if (type === 'discount') {
          discountRefFields()
          isEditBoolendis.value = false
          selecteddis.value = -1
        } else {
          buyRefFields()
          isEditBoolenbuy.value = false
          selectedbuy.value = -1
        }

        selectedRowIndex.value = -1
        selectedRowType.value = ''

        ElMessage({
          message: '删除成功',
          type: 'success'
        })
      }
    })
    .catch(() => {
      // 取消删除
    })

  closeContextMenu()
}
// #endregion

// 计算 specialNum
const specialNum = computed(() => {
  try {
    // 条件判断
    const conditionMet =
      (discountLen.value > 0 && buysLen.value === 0) ||
      (buysLen.value > 0 && discountLen.value === 0) ||
      (discountLen.value > 0 &&
        buysLen.value > 0 &&
        Number(discountTotal.billAmount) > Number(buyTotal.billAmount))

    // 根据条件选择数据源
    let billAmount: Decimal
    let interestDeduction: Decimal
    console.log('discountLen.value')
    console.log(discountLen.value)
    console.log('buysLen.value')
    console.log(buysLen.value)
    if (conditionMet) {
      if (discountLen.value > 0 && buysLen.value === 0) {
        // 使用 discountTotal 的数据
        billAmount = safeDecimal(discountTotal.billAmount)
        interestDeduction = safeDecimal(discountTotal.interestDeduction)
      } else if (buysLen.value > 0 && discountLen.value === 0) {
        // 使用 buyTotal 的数据
        billAmount = safeDecimal(buyTotal.billAmount)
        interestDeduction = safeDecimal(buyTotal.rebate)
      } else if (
        discountLen.value > 0 &&
        buysLen.value > 0 &&
        Number(discountTotal.billAmount) > Number(buyTotal.billAmount)
      ) {
        console.log('discountTotal.billAmount')
        console.log(discountTotal.billAmount)
        console.log('buyTotal.billAmount')
        console.log(buyTotal.billAmount)
        console.log('discountTotal.interestDeduction')
        console.log(total)

        // 使用 discountTotal 的数据
        billAmount = safeDecimal(total.billAmount)
        interestDeduction = safeDecimal(total.interestDeduction)
      } else {
        // 默认情况（根据你的需求补充）
        billAmount = new Decimal(0)
        interestDeduction = new Decimal(0)
      }
    } else {
      // 默认情况（根据你的需求补充）
      billAmount = new Decimal(0)
      interestDeduction = new Decimal(0)
    }
    console.log('billAmount')
    console.log(billAmount)
    console.log('interestDeduction')
    console.log(interestDeduction)
    // 执行计算
    return billAmount
      .sub(interestDeduction.ceil()) // 利息向上取整
      .toNumber()
  } catch (error) {
    console.error('计算错误:', error)
    return 0
  }
})

// 处理点击空白处清空表单
const handleClickOutside = () => {
  isEditBoolendis.value = false
  isEditBoolenbuy.value = false
  selecteddis.value = -1
  selectedbuy.value = -1
  selectedRowIndex.value = -1
  selectedRowType.value = ''
  discountRefFields()
  buyRefFields()
  // console.log('点击了空白处')
}
const firstInputForm1 = ref<HTMLElement | null>(null)
const firstInputForm2 = ref<HTMLElement | null>(null)

const formatPrice = (amount) => {
  if (amount === null || amount === undefined || amount === '' || amount == '已走平') {
    return '已走平'
  }
  return `${amount}元`
}

const isCaptureMode = ref<boolean>(false)

// 显示右键菜单
const showHistoryContextMenu = (
  event: MouseEvent,
  row: QuoteRecord, // 👈 这里用联合类型
  index: number,
  type: string
) => {
  console.log('showHistoryContextMenu')
  console.log(row)
  console.log(index)
  console.log(type)
  // 阻止默认右键菜单
  event.preventDefault()
  event.stopPropagation()
  // 设置菜单位置
  UploadDeleteContextMenuPosition.x = event.clientX
  UploadDeleteContextMenuPosition.y = event.clientY
  UploadDeleteContextMenuData.value = row
  // 显示菜单
  UploadDeleteContextMenuVisible.value = true
}

// 关闭右键菜单
const closeHistoryContextMenu = () => {
  UploadDeleteContextMenuVisible.value = false
}

const handleDeleteUpload = () => {
  quotelistApis()
  UploadDeleteContextMenuVisible.value = false
  UploadDeleteContextMenuPosition.x = 0
  UploadDeleteContextMenuPosition.y = 0
  UploadDeleteContextMenuData.value = {
    id: 0,
    serial_number: '',
    text: '',
    title: '',
    uid: 0,
    create_time: '',
    delete: 0,
    update_time: '',
    company_id: 0,
    company_name: '',
    totalAmount: 0
  }
  clearFrom()
}
const handleHistoryUpload = () => {
  quotelistApis()
  UploadDeleteContextMenuVisible.value = false
  UploadDeleteContextMenuPosition.x = 0
  UploadDeleteContextMenuPosition.y = 0
  UploadDeleteContextMenuData.value = {
    id: 0,
    serial_number: '',
    text: '',
    title: '',
    uid: 0,
    create_time: '',
    delete: 0,
    update_time: '',
    company_id: 0,
    company_name: '',
    totalAmount: 0
  }
  clearFrom()
}
// activeTab = 'complete' | 'record'
const activeTab = ref<string>('record')
const handleTabClick = (tab: string) => {
  activeTab.value = tab
  quotelistApis()
}
</script>

<template>
  <div>
    <div @click="handleClickOutside">
      <div class="calculator">
        <div class="calculator-enter">
          <div class="calculator-enter-headr">
            <div class="discount">
              <div class="discount-title">贴现</div>
              <div class="discount-item">
                <el-form
                  ref="discountRef"
                  :inline="true"
                  :model="discount"
                  class="demo-form-inline form-inline"
                  label-position="top"
                  size="default"
                  :rules="discountRules"
                  @keyup.enter="handleDiscountEnter"
                  @click.stop
                >
                  <el-form-item label="承兑人信息" prop="acceptor">
                    <el-input
                      ref="firstInputForm1"
                      v-model="discount.acceptor"
                      class="custom-input"
                    />
                  </el-form-item>
                  <el-form-item label="票面金额(万元)" prop="billAmount">
                    <el-input
                      v-model="discount.billAmount"
                      placeholder=""
                      style="width: 120px"
                      class="custom-input"
                      @input="handleInput('billAmount', 'discount')"
                    />
                  </el-form-item>
                  <el-form-item label="点数" prop="points">
                    <el-input
                      v-model="discount.points"
                      placeholder=""
                      style="width: 120px"
                      class="custom-input"
                      @input="handleInput('points', 'discount')"
                    />
                  </el-form-item>
                  <el-form-item label="张数" prop="open">
                    <el-select v-model="discount.open" placeholder="" style="width: 80px">
                      <el-option
                        v-for="number in 10"
                        :key="number"
                        :label="number"
                        :value="number"
                      />
                    </el-select>
                  </el-form-item>
                  <el-form-item>
                    <el-button
                      v-if="!isEditBoolendis"
                      type="primary"
                      @click="onSubmit(discountRef, 'discountList')"
                      >添加</el-button
                    >
                    <el-button v-else type="primary" @click="doEdit('discount')">修改</el-button>
                  </el-form-item>
                </el-form>
              </div>
              <div class="discount-title">买票</div>
              <div class="discount-item">
                <el-form
                  ref="buyRef"
                  :inline="true"
                  :model="buy"
                  class="demo-form-inline form-inline"
                  label-position="top"
                  :rules="buyRules"
                  size="default"
                  @keyup.enter="handleBuyEnter"
                  @click.stop
                >
                  <el-form-item label="承兑人信息" prop="acceptor">
                    <el-input
                      ref="firstInputForm2"
                      v-model="buy.acceptor"
                      placeholder=""
                      class="custom-input"
                    />
                  </el-form-item>
                  <el-form-item label="票面金额(万元)" prop="billAmount">
                    <el-input
                      v-model="buy.billAmount"
                      placeholder=""
                      style="width: 120px"
                      class="custom-input"
                      @input="handleInput('billAmount', 'buy')"
                    />
                  </el-form-item>
                  <el-form-item label="点数" prop="points">
                    <el-input
                      v-model="buy.points"
                      placeholder=""
                      style="width: 120px"
                      class="custom-input"
                      @input="handleInput('points', 'buy')"
                    />
                  </el-form-item>
                  <el-form-item label="张数" prop="open">
                    <el-select v-model="buy.open" placeholder="" style="width: 80px">
                      <el-option
                        v-for="number in 10"
                        :key="number"
                        :label="number"
                        :value="number"
                      />
                    </el-select>
                  </el-form-item>
                  <el-form-item>
                    <el-button
                      v-if="!isEditBoolenbuy"
                      type="primary"
                      @click="onSubmit(buyRef, 'buyList')"
                      >添加</el-button
                    >
                    <el-button v-else type="primary" @click="doEdit('buy')">修改</el-button>
                  </el-form-item>
                </el-form>
              </div>
            </div>
            <div class="function">
              <div>功能</div>
              <div class="function-item">
                <div class="function-button">
                  <el-button type="primary" size="default" @click="clear">清空</el-button>
                </div>
                <div class="function-button function-button-pdt">
                  <el-button type="danger" size="default" @click="deleteRows">删除</el-button>
                </div>
                <div class="function-button function-button-pdt">
                  <el-button v-if="historyActive < 0" type="primary" size="default" @click="saves"
                    >保存</el-button
                  >
                  <el-button v-else type="primary" size="default" @click="edits">修改</el-button>
                </div>
              </div>
            </div>
          </div>
          <div ref="contentRef" class="calculator-enter-body">
            <!-- 用于截图的临时容器 -->
            <div ref="snapshotRef" class="snapshot-container" style="display: none"></div>
            <div class="head">
              <div class="heads-left">
                <div class="heads-icons">
                  <img src="@/assets/bill/tb.png" alt="" srcset="" />
                </div>
                <div class="company-name">浙江网京</div>
                <div class="company-title">专业承兑服务</div>
              </div>
              <div class="heads-right">NO:{{ serial_number }}</div>
            </div>
            <el-scrollbar max-height="350px">
              <div v-if="buysLen > 0 || discountLen > 0">
                <!--  字体加粗 框 加粗 -->
                <table class="tables" border="0" cellspacing="0" cellpadding="0">
                  <tbody ref="tableBody">
                    <tr v-if="discountLen > 0">
                      <th
                        v-if="!isCaptureMode"
                        style="width: 30px; font-weight: bold; color: #333"
                      ></th>
                      <th style="width: 60px; font-weight: bold; color: #333">序号</th>
                      <th style="width: 60px; font-weight: bold; color: #333">事项</th>
                      <th style="width: 120px; font-weight: bold; color: #333">承兑人信息</th>
                      <th style="width: 160px; font-weight: bold; color: #333">票面金额(万元)</th>
                      <th style="width: 100px; font-weight: bold; color: #333">点数</th>
                      <th style="width: 100px; font-weight: bold; color: #333">张数</th>
                      <th style="width: 160px; font-weight: bold; color: #333">贴息费(元)</th>
                      <th style="width: 160px; font-weight: bold; color: #333">返点</th>
                    </tr>
                    <template v-if="discountLen > 0">
                      <tr
                        v-for="(item, index) in discountList"
                        :key="index"
                        :ref="(el: any) => setRowRef(el, 'discount', index)"
                        :class="{
                          selected: index === selectedRowIndex && selectedRowType == 'discount',
                          'row-checked': item.checked
                        }"
                        @click.stop="selectRow(index, 'discount')"
                        @contextmenu.prevent="showContextMenu($event, item, index, 'discount')"
                      >
                        <td v-if="!isCaptureMode" @click.stop>
                          <el-checkbox v-model="item.checked" @click.stop></el-checkbox>
                        </td>
                        <td>{{ item.serialNumber }}</td>
                        <td>{{ item.matter }}</td>
                        <td>{{ item.acceptor }}</td>
                        <td>
                          {{ item.billAmount }}
                        </td>
                        <td>{{ item.points }}</td>
                        <td>{{ item.open }}</td>
                        <td>{{ item.interestDeduction }}</td>
                        <td>{{ item.rebate }}</td>
                      </tr>
                    </template>
                    <template v-if="buysLen > 0">
                      <tr style="">
                        <th
                          v-if="!isCaptureMode"
                          style="width: 30px; font-weight: bold; color: #333"
                        ></th>
                        <th style="width: 60px; font-weight: bold; color: #333">序号</th>
                        <th style="width: 60px; font-weight: bold; color: #333">事项</th>
                        <th style="width: 120px">
                          <div
                            v-if="buysLen > 0 && discountLen < 1"
                            style="font-weight: bold; color: #333"
                          >
                            承兑人信息
                          </div>
                          <div v-else>&nbsp;</div>
                        </th>
                        <th style="width: 160px">
                          <div
                            v-if="buysLen > 0 && discountLen < 1"
                            style="font-weight: bold; color: #333"
                          >
                            票面金额(万元)
                          </div>
                          <div v-else>&nbsp;</div>
                        </th>
                        <th style="width: 100px">
                          <div
                            v-if="buysLen > 0 && discountLen < 1"
                            style="font-weight: bold; color: #333"
                          >
                            点数
                          </div>
                          <div v-else>&nbsp;</div>
                        </th>
                        <th style="width: 100px">
                          <div
                            v-if="buysLen > 0 && discountLen < 1"
                            style="font-weight: bold; color: #333"
                          >
                            张数
                          </div>
                          <div v-else>&nbsp;</div>
                        </th>
                        <th style="width: 160px">
                          <div
                            v-if="buysLen > 0 && discountLen < 1"
                            style="font-weight: bold; color: #333"
                          >
                            贴息费(元)
                          </div>
                          <div v-else>&nbsp;</div>
                        </th>

                        <th style="width: 160px">
                          <div
                            v-if="buysLen > 0 && discountLen < 1"
                            style="font-weight: bold; color: #333"
                          >
                            返点
                          </div>
                          <div v-else>&nbsp;</div>
                        </th>
                      </tr>
                      <tr
                        v-for="(item, index) in buysList"
                        :key="index"
                        :ref="(el: any) => setRowRef(el, 'buy', index)"
                        :class="{
                          selected: index === selectedRowIndex && selectedRowType == 'buy',
                          'row-checked': item.checked
                        }"
                        @click.stop="selectRow(index, 'buy')"
                        @contextmenu.prevent="showContextMenu($event, item, index, 'buy')"
                      >
                        <td v-if="!isCaptureMode">
                          <el-checkbox v-model="item.checked"></el-checkbox>
                        </td>
                        <td>{{ item.serialNumber }}</td>
                        <td>{{ item.matter }}</td>
                        <td>{{ item.acceptor }}</td>
                        <td>
                          {{ item.billAmount }}
                        </td>

                        <td>{{ item.points }}</td>
                        <td>{{ item.open }}</td>
                        <td>{{ item.interestDeduction }}</td>
                        <td>{{ item.rebate }}</td>
                      </tr>
                    </template>
                    <template v-if="buysLen > 0 || discountLen > 0">
                      <tr class="total">
                        <td colspan="10">
                          <div class="total-item">
                            <div class="total-item-title">{{ total.acceptor }}</div>
                            <div class="total-item-value" style="margin-right: 80px">
                              {{ formatPrice(total.billAmount) }}
                            </div>
                            <div class="total-item-title">{{ total.points }}</div>
                            <div class="total-item-value">
                              {{ formatPrice(total.interestDeduction) }}
                            </div>
                            <div class="total-item-value">{{ total.rebate }}</div>
                          </div>
                        </td>
                      </tr>
                    </template>
                    <tr
                      v-if="
                        special &&
                        ((discountLen > 0 && buysLen == 0) ||
                          (buysLen > 0 && discountLen == 0) ||
                          (discountLen > 0 &&
                            buysLen > 0 &&
                            Number(discountTotal.billAmount) > Number(buyTotal.billAmount)))
                      "
                    >
                      <td colspan="10">
                        <div class="special">
                          <template v-if="discountLen > 0 && buysLen == 0">
                            扣息回款: {{ discountTotal.billAmount }} -
                            {{ discountTotal.interestDeduction }} =
                            {{ specialNum }}
                            元
                          </template>
                          <template v-else-if="buysLen > 0 && discountLen == 0">
                            返点回款: {{ buyTotal.billAmount }} - {{ buyTotal.rebate }} =
                            {{ specialNum }}
                            元
                          </template>
                          <template
                            v-else-if="
                              discountLen > 0 &&
                              buysLen > 0 &&
                              Number(discountTotal.billAmount) > Number(buyTotal.billAmount)
                            "
                          >
                            扣息回款: {{ total.billAmount }} - {{ total.interestDeduction }} =
                            {{ specialNum }}
                            元
                          </template>
                        </div>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <div v-else>
                <el-empty description="暂无数据" />
              </div>
            </el-scrollbar>
          </div>
        </div>
        <div class="calculator-history">
          <div class="history">
            <div class="title">
              <div>
                <el-button
                  :type="activeTab == 'record' ? 'primary' : 'default'"
                  text
                  size="large"
                  @click="handleTabClick('record')"
                >
                  记录
                </el-button>
              </div>
              <div>
                <el-button
                  :type="activeTab == 'complete' ? 'primary' : 'default'"
                  text
                  size="large"
                  @click="handleTabClick('complete')"
                >
                  完成
                </el-button>
              </div>
            </div>
            <div class="content">
              <el-scrollbar>
                <p
                  v-for="(item, index) in historyList"
                  :key="index"
                  class="scrollbar-demo-item"
                  :class="{ active: historyActive === index }"
                  @click="handleHistory(item, index)"
                  @contextmenu.prevent="showHistoryContextMenu($event, item, index, 'buy')"
                >
                  {{ item.title }}
                </p>
              </el-scrollbar>
            </div>
            <div class="btn">
              <el-date-picker
                v-model="historyDate"
                type="date"
                placeholder="请选择日期"
                :disabled-date="disabledDate"
                :format="customDateFormat"
                :value-format="customDateFormat"
                size="small"
                @change="handleDateChange"
              />
              <!-- <el-button type="primary" > 读取 </el-button> -->
              <el-button type="danger" size="small" @click="HistoryDelete()"> 删除 </el-button>
            </div>
          </div>
          <div class="refund">
            <div class="title">回款方式</div>
            <div class="content">
              <el-button
                v-if="isCompleteBoolean"
                type="primary"
                size="small"
                @click="handleCompleteLocal"
                >扣&nbsp;&nbsp;息&nbsp;&nbsp;回&nbsp;&nbsp;款</el-button
              >
              <el-button v-else type="primary" size="small" @click="handleCompleteLocal"
                >全&nbsp;&nbsp;额&nbsp;&nbsp;回&nbsp;&nbsp;款</el-button
              >
            </div>
          </div>
          <div class="table">
            <div class="title">表格截图</div>
            <div class="content">
              <el-button type="primary" size="small" @click="handlePicture"
                >截&nbsp;&nbsp;&nbsp;&nbsp;图</el-button
              >
            </div>
          </div>
          <!-- <div class="logout">
            <div class="title">退出登录</div>
            <div class="content">
              <el-button type="primary" size="small" @click="logout">
                退&nbsp;&nbsp;&nbsp;&nbsp;出
              </el-button>
            </div>
          </div> -->
        </div>
      </div>
    </div>
  </div>

  <!-- 右键菜单 -->
  <ContextMenu
    :visible="contextMenuVisible"
    :position="contextMenuPosition"
    @copy="handleCopyRow"
    @copy-clipboard="handleCopyToClipboard"
    @delete="handleDeleteRow"
  />
  <UploadDeleteContextMenu
    :visible="UploadDeleteContextMenuVisible"
    :position="UploadDeleteContextMenuPosition"
    :data="UploadDeleteContextMenuData"
    @delete="handleDeleteUpload"
    @upload="handleHistoryUpload"
  />
</template>

<style lang="scss" scoped>
.calculator {
  display: flex;
  justify-content: space-between;
  width: 100%;
  .calculator-enter {
    width: 80%;
    margin-right: 10px;
    .calculator-enter-body {
      // border: 1px solid #ccc;
      // padding: 20px;
      // height: 400px;
      // overflow: auto; /* 开启滚动条 */
      /* Table style */
      table {
        width: 100%;
        // border-collapse: collapse;
      }
      th,
      td {
        padding: 2px;
        border: 1px solid #eee; /* 边框颜色对比 */
        // border: 2px double #eaeaea; /* 边框颜色对比 */
        // border: 1px solid #ddd;
        // text-align: left;
        text-align: center;
        // font-weight: bold;
        // border: 2px solid #fff;
      }
      th {
        position: sticky;
        top: 0; /* 标题行固定在顶部 */
        background-color: #f2f2f2;
        // color: #fff;
        // font-weight: bold;
      }
      // tr {
      // font-weight: bold;
      // }
      //       tr:nth-child(even) {
      //   background-color: #f2f2f2; /* 斑马线效果 */
      // }

      // tr:hover {
      //   background-color: #ddd; /* 鼠标悬停效果 */
      // }
      // td {
      // font-weight: bold;
      // }

      /* Hover effect */
      // tr:hover {
      //   // background-color: #f5f5f5;
      // }
      .total {
        background-color: #134e88;
        color: white;
        .total-item {
          display: flex;
          justify-content: center;
          width: 100%;
          .total-item-title {
            padding: 0 10px;
          }
          .total-item-content {
            // width: 100px;
            padding: 0 10px;
          }
        }
      }
    }
    .calculator-enter-headr {
      display: flex;
      justify-content: flex-end;
      width: 100%;
      margin: 10px 0;
      .discount {
        // width: 880px;
        border: 1px solid #ccc;
        padding: 6px;

        .discount-title {
          font-size: 20px;
          font-weight: 700;
          margin-bottom: 10px;
        }
        .discount-item {
          display: flex;
          width: 100%;
          .form-inline {
            display: flex;
            align-items: flex-end;
            flex-wrap: nowrap;
          }
        }
      }
      .function {
        margin-left: 10px;
        padding: 20px;
        border: 1px solid #ccc;
        width: 10%;
        .function-item {
          display: flex;
          flex-direction: column;
          align-items: center;
          .function-button {
            padding-top: 20px;
          }
          .function-button-pdt {
            padding-top: 50px;
          }
        }
      }
    }
  }

  .calculator-history {
    width: 20%;
    margin-top: 10px;
    .history {
      border: 1px solid #ccc;
      margin-bottom: 10px;
      padding: 4px;
      .title {
        font-size: 20px;
        margin-bottom: 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .content {
        height: 416px;
        // height: 324px;
        overflow: auto; /* 开启滚动条 */
        // background-color: #efefef;
        .active {
          background-color: #f5f5f5;
        }
      }
      .btn {
        display: flex;
        justify-content: center;
        margin-top: 10px;
      }
    }
    .refund {
      padding: 10px;
      border: 1px solid #ccc;
      margin-bottom: 10px;
      .title {
        font-size: 20px;
        font-weight: 700;
        margin-bottom: 10px;
      }
      .content {
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
    .table {
      padding: 10px;
      border: 1px solid #ccc;
      margin-bottom: 10px;
      .title {
        font-size: 20px;
        font-weight: 700;
        margin-bottom: 10px;
      }
      .content {
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
    .logout {
      padding: 10px;
      border: 1px solid #ccc;
      .title {
        font-size: 20px;
        font-weight: 700;
        margin-bottom: 10px;
      }
      .content {
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
}
.selected {
  background-color: #f0f0f0;
}
.scrollbar-demo-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  margin: 10px;
  text-align: center;
  border-radius: 4px;
  background: var(--el-color-primary-light-9);
  color: var(--el-color-primary);
  cursor: pointer;
  transition: background-color 0.3s ease;
}
.special {
  display: flex;
  align-items: center;
  justify-content: center;
  color: red;
  font-size: 20px;
}

.head {
  height: 60px;
  width: 100%;
  background: radial-gradient(circle, #fcccbc, #f4ba97);
  display: flex;
  justify-content: space-between;
}
.heads-left {
  display: flex;
}
.heads-left .company-name {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 30px;
  font-weight: bold;
  font-family: Inter, 'Microsoft YaHei', serif;
}
.heads-left .company-title {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  margin-bottom: 10px;
  margin-left: 10px;
  font-size: 18px;
  font-weight: bold;
  color: #0d84ff;
  font-family: Inter, 'Microsoft YaHei', serif;
}
.heads-icons {
  width: 80px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.heads-icons img {
  width: 50px;
}
.heads-right {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  margin-bottom: 10px;
  margin-right: 10px;
  font-size: 16px;
}
.row-checked {
  background-color: #ffeb3b; /* 自定义背景颜色 */
  // background-color: #f0f8ff; /* 自定义背景颜色 */
}
.table-header {
  position: sticky;
  top: 0;
  background-color: #fff;
  z-index: 1;
}
.custom-input {
  border: 1px solid #999; /* 设置边框样式 */
  border-radius: 4px; /* 设置圆角 */
}

// 右键菜单样式
.context-menu {
  position: fixed;
  background: white;
  border: 1px solid #eee;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  padding: 5px 0;
  z-index: 9999;

  &-item {
    padding: 8px 16px;
    cursor: pointer;
    font-size: 14px;

    &:hover {
      background-color: #f5f7fa;
    }
  }
}
</style>
